import React from 'react'
import { actions } from 'mirrorx'
import { Form, Button, Input } from 'antd'
import MidNav from '../../component/MidNav'

const FormItem = Form.Item

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      confirmDirty: false
    }

    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleConfirmBlur = this.handleConfirmBlur.bind(this)
    this.compareToFirstPassword = this.compareToFirstPassword.bind(this)
    this.validateToNextPassword = this.validateToNextPassword.bind(this)
    this.windowHeight = T.getScreenHeight() - 36
  }

  componentDidMount () {

  }

  handleSubmit (e) {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values)
        delete values.confirm
        this.requestChangePassword(values)
      }
    })
  }

  handleConfirmBlur (e) {
    const value = e.target.value
    this.setState({ confirmDirty: this.state.confirmDirty || !!value })
  }

  compareToFirstPassword (rule, value, callbackFun) {
    const form = this.props.form
    if (value && value !== form.getFieldValue('newPassword')) {
      callbackFun('Two passwords that you enter is inconsistent!')
    } else {
      callbackFun()
    }
  }

  validateToNextPassword (rule, value, callback) {
    const form = this.props.form
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true })
    }
    callback()
  }

  requestChangePassword (data) {
    T.ajax({
      url: 'api/uc/user/changePwd',
      data: data
    }).then((res) => {
      if (res.success) {
        this.logoutRequest()
      } else {
        T.showError('change password failed')
      }
    })
  }

  logoutRequest () {
    T.ajax({
      url: '/logout',
      loading: true
    }).then((result) => {
      if (result.success) {
        actions.routing.push({
          pathname: '/changepasswordsuccess'
        })
      }
    })
  }

  render () {
    const { getFieldDecorator } = this.props.form

    return (
      <div>
        <div className='verification' style={{ minHeight: this.windowHeight }}>
          <MidNav title='Security' />
          <div className='wrap'>
            <div className='innerBox'>
              <Form onSubmit={this.handleSubmit} className='step-one pt40 changePassword pl50'>
                <FormItem className='inputItem mb60'>
                  <p style={{ fontSize: '18px', color: '#333' }}>Change Password</p>
                  {getFieldDecorator('oldPassword', {
                    rules: [{ required: true, message: 'Please enter current password' },
                      { pattern: T.regObj['password'], message: 'The password is not valid' },
                      {
                        validator: this.validateToNextPassword
                      }]
                  })(
                    <Input type='password' placeholder='Current password' maxLength={'50'} />
                  )}
                </FormItem>
                <FormItem className='inputItem mb40'>
                  <p style={{ fontSize: '14px', color: '#333' }}>Use 8 or more characters with a mix of ONLY letters&numbers</p>
                  {getFieldDecorator('newPassword', {
                    rules: [{ required: true, message: 'Please enter the password' },
                      { pattern: T.regObj['password'], message: 'The password is not valid' },
                      {
                        validator: this.validateToNextPassword
                      }]
                  })(
                    <Input type='password' placeholder='Enter the new password' maxLength={'50'} />
                  )}
                </FormItem>
                <FormItem className='inputItem mb40'>
                  {getFieldDecorator('confirm', {
                    rules: [
                      { required: true, message: 'Please enter the password' }, {
                        validator: this.compareToFirstPassword
                      }]
                  })(
                    <Input type='password' placeholder='Re-enter the password' onBlur={this.handleConfirmBlur} maxLength={'50'} />
                  )}
                </FormItem>
                <FormItem className='inputItem'>
                  <Button type='primary' className='tinyBtn' htmlType='submit' style={{ width: '180px' }}>Save change</Button>
                </FormItem>
              </Form>
              <div className='icon-wrap fr'>
                <i className='iconfont icon-icon_lock' />
              </div>
            </div>

          </div>
        </div>
      </div>

    )
  }
}

const FormWrapper = Form.create()(App)

export default FormWrapper
